<template>
    <div>
        <el-row :gutter="20" type="flex" justify="space-around">
            <el-col v-show="open" :span="5" class="exam_list">
                <el-form :model="examParams" ref="examForm" size="mini" :inline="true" label-width="48px">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="examParams.name" placeholder="请输入考试名称" clearable @keyup.enter.native="examQuery"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" size="mini" plain @click="examQuery" v-hasPermi="['score:performance:list']">搜索</el-button>
                    </el-form-item>
                </el-form>

                <el-table v-loading="exam_loading" :data="score_ex_examList" size="mini" :height="table_height" @row-dblclick="changeSelectExam">
                    <el-table-column label="名称" align="center" prop="name"/>
                    <el-table-column label="考试日期" align="center" width="176px">
                        <template slot-scope="scope">
                            <el-tag size="small" effect="plain" v-if="scope.row.exStartDate === scope.row.exEndDate">
                                {{ scope.row.exStartDate }}
                            </el-tag>
                            <template v-else>
                                <el-tag size="small" type="success" effect="plain">{{ scope.row.exStartDate }} ~ {{ scope.row.exEndDate }}</el-tag>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :background="false" layout="prev, pager, next" v-show="exam_total>0" :total="exam_total" :page.sync="examParams.pageNum" :limit.sync="examParams.pageSize" @pagination="getExamList"/>
            </el-col>
            <el-col :span="0.1" style="text-align: right">
                <el-tooltip :content="open ? '收起' : '展开'" placement="top" effect="light" style="top: 50%;margin: 0;padding: 0">
                    <el-button class="button_position" :icon="open ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'" type="text" @click="open = !open"/>
                </el-tooltip>
            </el-col>
            <el-col :span="open ? 18 : 23" class="echarts">
                <el-row :gutter="20" style="height: 100%;">
                 <el-col :span="16" style="height: 100%;">
                     <el-row style="height: 50%;width: 100%">
                         <!-- 折线图 -->
                         <el-card class="box-card" style="height: 100%;width: 100%">
                             <center>
                                 <div id="lineChart" style="height: 100%;width: 100%"/>
                             </center>
                         </el-card>
                     </el-row>
                     <el-row>
                         <!-- 柱状图 -->
                         <el-card class="box-card mt10">
                             <center>
                                 <div id="histogram"/>
                             </center>
                         </el-card>
                     </el-row>
                 </el-col>
                 <el-col :span="8">
                     <el-row>
                         <!-- 饼图 -->
                         <el-card class="box-card">
                             <center>
                                 <div id="pieChart"/>
                             </center>
                         </el-card>
                     </el-row>
                     <el-row>
                         <!-- 百分率 -->
                         <el-card class="box-card mt10" style="height: 440px">
                             <p class="percentage-title">成绩四率</p>
                             <percentage :values="percentageOption.data" :titles="percentageOption.titles"/>
                         </el-card>

                     </el-row>
                 </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>
<script>

import * as echarts from 'echarts'
import percentage from '@/views/tool/percentage.vue'
import {listScore_ex_exam} from "@/api/score/score_ex_exam";
export default {
    components:{percentage},
    data() {
        return {
            exam_loading: false,
            score_ex_examList: [],
            exam_total: 0,
            examParams: {// 查询参数
                pageNum: 1,
                pageSize: 10,
                name: null,
            },
            //-------------
            //考试搜索开关
            open: true,
            // 折线图option配置
            lineChartOption : {
                title: {
                    text: '成绩区间统计'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['导尿术评分卡', '四肢骨折现场急救外固定', '《胸腔穿刺术》', '《腰椎穿刺术》', '《腹腔穿刺术》']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['0-40','40-60','60-100','100-150']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '导尿术评分卡',
                        type: 'line',
                        stack: 'Total',
                        data: [3,30,45,12]
                    },
                    {
                        name: '四肢骨折现场急救外固定',
                        type: 'line',
                        stack: 'Total',
                        data: [34,10,56,12]
                    },
                    {
                        name: '《胸腔穿刺术》',
                        type: 'line',
                        stack: 'Total',
                        data: [15,10,13,15]
                    },
                    {
                        name: '《腰椎穿刺术》',
                        type: 'line',
                        stack: 'Total',
                        data: [45,2,4,35]
                    },
                    {
                        name: '《腹腔穿刺术》',
                        type: 'line',
                        stack: 'Total',
                        data: [13,45,12,45]
                    }
                ]
            },
            // 柱状图option配置
            histogramOption:   {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['导尿术评分卡', '四肢骨折现场急救外固定', '《胸腔穿刺术》', '《腰椎穿刺术》', '《腹腔穿刺术》'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '人数',
                        type: 'bar',
                        barWidth: '60%',
                        data: [45, 55, 47,49, 39]
                    }
                ]
            },
            // 饼图option配置
            pieChartOption: {
                title: {
                    text: '考试成绩占比',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '占比',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 23, name: '0-40' },
                            { value: 15, name: '40-60' },
                            { value: 34, name: '60-100' },
                            { value: 56, name: '100-150' },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            },
            percentageOption:{
                data: [100,66,45,20],
                titles: ['参考率','成材率','达标率','合格率']
            },
            lineChart: null,
            histogram: null,
            pieChart: null,
        };
    },
    created() {
        this.$notify({
            title: '提示',
            message: '此页面为定制化页面，数据均为展示样例，可根据用户需求定制统计内容',
            type: 'info',
        });
    },
    mounted() {
        this.getExamList();
        this.lineChartInit();
        this.histogramChartInit();
        this.pieChartInit();
        const _this = this;

        // 监听浏览器窗口变化
        window.addEventListener("resize", () => {
            this.resizeChange()
        });
    },
    methods: {
        /** 获取考试列表 */
        getExamList() {
            this.exam_loading = true;
            listScore_ex_exam(this.examParams).then(response => {
                this.score_ex_examList = response.rows;
                this.exam_total = response.total;
                this.exam_loading = false;
            });
        },
        examQuery() {
            this.examParams.pageNum = 1;
            this.getExamList();
        },
        examResetQuery() {
            this.resetForm("examForm");
            this.examQuery();
        },
        changeSelectExam(row) {
            this.examName = row.name;
            this.queryParams.examId = row.id;
            this.getList();
        },
        //-----------------
        lineChartInit() {
            // 在生命周期中挂载
            let el = document.getElementById('lineChart');
            this.lineChart = echarts.init(el, null,{width: el.clientWidth,height: 400});
            this.lineChartSetOption();
        },
        lineChartSetOption(){
            this.lineChart.setOption(this.lineChartOption);
        },
        histogramChartInit() {
            let el = document.getElementById('histogram');
            // 在生命周期中挂载
            this.histogram = echarts.init(el, null,
                {width: el.clientWidth, height: 400});
            this.histogramChartSetOption();
        },
        histogramChartSetOption(){
            this.histogram.setOption(this.histogramOption);
        },
        pieChartInit() {
            let el = document.getElementById('pieChart');
            // 在生命周期中挂载
            this.pieChart = echarts.init(el, null,
                {width: el.clientWidth, height: 400});
            this.pieChartSetOption();
        },
        pieChartSetOption(){
            this.pieChart.setOption(this.pieChartOption);
        },
        chartResize(chartId,height){
            let el = document.getElementById(chartId);
            this[chartId].resize({width:el.clientWidth,height: height});
        },
        resizeChange(){
            setTimeout(()=>{
                this.chartResize('lineChart',400);
                this.chartResize('histogram',400);
                this.chartResize('pieChart',400);
            },10)
        }
    },
    watch: {
        open(n,o){
            this.resizeChange();
        }
    },
};
</script>
<style scoped>
.button_position{
    text-align: center;
    top: 500px;
    margin-left: -15px;
    position:fixed;
    z-index:100;
}
.exam_list{
    padding: 15px 5px 5px 5px;
}
/*------------*/
.echarts{
    height: 910px;
    padding: 15px 15px 15px 30px;
}

.percentage-title{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 90px;
    color: #606266;
    text-shadow: 1px 1px 1px #bebfc3;
}

.zhexian{
    width: 100%;
    height: 400px;
}

</style>
